<template>
  <div class="main" :data="data">
    <div :id="id">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import geoJSON from './json/map.json'
  import tools from "./tools/autoHover.js"; //引入tools.js
  export default {
    name: 'map',
    props: {
      data: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    computed: {
      id: function() {
        return `map-${Math.random()}`
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.onInit()
      })
    },
    updated() {
      this.$nextTick(() => {
        this.onInit()
      })
    },
    methods: {
      onInit() {
        echarts.registerMap('长春', geoJSON);
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var geoCoordMap = {
          '南关区': [125.412301, 43.655267],
          '宽城区': [125.342828, 44.153823],
          '朝阳区': [125.228042, 43.75491],
          '二道区': [125.754727, 43.870824],
          '绿园区': [125.152467, 43.822177],
          '双阳区': [125.659018, 43.595168],
          '九台区': [125.844682, 44.107155],
          '公主岭市': [124.674107, 43.786324],
          '农安县': [125.08508, 44.552531],
          '德惠市': [125.700373, 44.554404],
          '榆树市': [126.595959, 44.803204],
        }

        var convertData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              let obj = {
                name: data[i].name
              }
              obj = {
                ...obj,
                ...data[i]
              }
              obj.value = geoCoord.concat(data[i].value)
              res.push(obj)
            }
          }

          return res;
        };


        let setAmount = this.setAmount
        let setAmountText = this.setAmountText
        var option;
        option = {
          tooltip: {
            show: true,
            trigger: 'item',
            backgroundColor: 'transparent',
            formatter: function(params) {
              const {
                data
              } = params
              const str = `<div id="map-tooltips-wrap">` +
                `<div class="title">${data.name}概况</div>` +
                `<div>预警推送数:<p><span>${data.totalWarnings}</span>起</p></div>` +
                `<div>已劝阻数:<p><span>${data.totalDissuadedWarnings}</span>起</p></div>` +
                `<div>案件数:<p><span>${data.totalCases}</span>件</p></div>` +
                `<div>止损金额:<p><span>${setAmount(data.totalAmountOfStopLoss)}</span>${setAmountText(data.totalAmountOfStopLoss)}元</p></div>` +
                `<div>损失金额:<p><span>${setAmount(data.totalAmountOfLoss)}</span>${setAmountText(data.totalAmountOfLoss)}元</p></div>` +
                `</div>`
              return str
            }
          },
          geo: [{
            map: '长春',
            label: {
              show: true,
              color: '#fff'
            },
            z: 2,
            itemStyle: {
              areaColor: 'rgba(0, 180, 255, 0.2)',
              borderColor: 'rgba(0, 180, 255, .6)',
              borderWidth: 5,
              shadowColor: 'rgba(0, 180, 255, 1)',
              shadowBlur: 35
            },
            emphasis: {
              label: {
                color: '#fff'
              },
              itemStyle: {
                areaColor: 'rgba(0, 180, 255, 0.6)',
                borderWidth: 1,
              },
            },

          }, ],
          series: [{
              type: 'map',
              map: '长春',
              label: {
                show: false
              },
              z: 3,
              itemStyle: {
                areaColor: 'rgba(0, 180, 255, 0.2)',
                borderColor: 'rgba(255, 255, 255, .6)',
                borderWidth: 2,
                shadowColor: 'rgba(0, 180, 255, 1)',
                shadowBlur: 35
              },
              emphasis: {
                label: {
                  color: '#fff'
                },
                itemStyle: {
                  areaColor: 'rgba(0, 180, 255, 0.6)',
                  borderWidth: 1,
                },
              },
              data: this.data
            },

            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(this.data),
              symbolSize: function(val) {
                const num = val[2]
                let size = 0
                if (num > 0 && num < 10) {
                  size = 10
                } else if (num > 40) {
                  size = 40
                } else {
                  size = val[2]
                }
                return size;
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: '#D33C36',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            },
          ]
        }
        myChart.setOption(option, true)
        tools.autoHover(myChart, option, this.data.length, 3000);
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
      setAmount(num) {
        let amount = 0
        if (num > 100000000) {
          let result = (num / 100000000).toString()
          amount = result.indexOf('.') === -1 ? result : result.toFixed(2)
        } else if (num > 100000) {
          let result = (num / 10000).toString()
          amount = result.indexOf('.') === -1 ? result : result.toFixed(2)
        } else {
          amount = num
        }
        return amount
      },
      setAmountText(num) {
        let text = ''
        if (num > 100000000) {
          text = '亿'
        } else if (num > 100000) {
          text = '万'
        }
        return text
      },
    }
  }
</script>
<style lang="less">
  @font-face {
    font-family: 'pang';
    src: url(../../font/PangMenZhengDaoBiaoTiTi-1.ttf);
  }

  #map-tooltips-wrap {
    font-family: pang;
    width: 30.185vh;
    height: 17.9263vh;
    background-image: url(./image/tooltips-wrap.png);
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.926vh;
    padding-bottom: 4.1666vh;
    font-size: 1.48148vh;
    .title{
      width: 100%;
      height: 3.7vh;
      margin-bottom: 0.47vh;
      padding-left: 2.777vh;
      line-height: 3.7vh;
    }
    >div {
      width: 30%;
      height: 50%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      padding-left: 2.777vh;

      span {
        font-size: 1.8518vh;
        color: #FFCC00;
        margin-right: 5px;
      }
    }
  }
</style>
<style lang="less" scoped>
  .main {
    width: 100%;
    height: 100%;

    >div {
      width: 100%;
      height: 100%;
    }
  }
</style>
